import './style.scss' // 引入样式
import axios from 'axios' // 引入axios
import { $, $s } from './utils' // 获取元素
// 参考效果视频实现功能。
// 题目要求：
// 1，使用webpack或者vite搭建开发环境 （10分）
// 2，配置sass，使用sass定义样式（10分）
// 3，调用 ‘http://121.89.213.194:3001/api/music’获取数据，渲染左侧键盘（10分）
// 4，配置代理处理跨域问题（10分）

// 5，鼠标点击左侧按钮添加高亮播放对应的音乐，鼠标抬起高亮消失（15分）
// 6，按下键盘对应的按钮添加高亮播放对应的音乐，键盘抬起高亮消失（15分）
// 7，实现power按钮功能，power开启允许播放音乐，关闭点击左侧按钮不能播放音乐（10分）
// 8，按下左侧键盘按钮右侧power下方展示正在播放的音乐标题（10分）
// 9，拖动进度条控制音量大小（10分）

// 变量
let data = null
let flag = false // 标识是否可以拖动
let pos = null // 按下时鼠标相对slider元素的位置
let jdge = false // 是否允许播放
// 元素
const audio = $('audio')
const left = $('.left')
const length = $('.progressBar').offsetWidth

// 初始化
init()

// 点击key事件
left.addEventListener('click', (e) => {
  // 事件源
  const et = e.target || window.event.srcElement
  // 点击key
  // console.log(et.dataset.keyCode)
  if (!jdge) return
  if (et.className !== 'key') return
  setUrl(et.dataset.keyCode)
})
// 键盘按下
document.addEventListener('keydown', (e) => {
  $s('.key').some(v => {
    if (e.keyCode == v.dataset.keyCode) {
      v.click()
      // setUrl(e.keyCode, 'url')
      v.classList.add('active')
    }
  })
})
// 键盘抬起
document.addEventListener('keyup', (e) => {
  $s('.key').some(v => {
    if (e.keyCode == v.dataset.keyCode) {
      v.classList.remove('active')
    }
  })
})
// 可以播放事件
audio.addEventListener('canplay', () => audio.play())
// 点击bank
$('.bank').addEventListener('click', function() {
  if (this.dataset.str === 'bankUrl') {
    this.dataset.str = 'url'
    this.lastElementChild.classList.remove('active')
  } else {
    this.dataset.str = 'bankUrl'
    this.lastElementChild.classList.add('active')
  }
})
// 点击power
$('.power').addEventListener('click',  function() {
  this.lastElementChild.classList.toggle('active')
  jdge = this.lastElementChild.classList.contains('active')
})
// 滑块鼠标按下
$('.slider').addEventListener('mousedown', function(e) {
  // 允许拖动
  flag = true
  // 记录位置
  // console.log($('.slider').offsetLeft)
  const sliderPos = $('.slider').getBoundingClientRect()
  pos = {
    x: e.offsetX,
    l: sliderPos.left - $('.slider').offsetLeft - sliderPos.width / 2
  }
  // console.log(pos)
})
// 鼠标移动事件
document.addEventListener('mousemove', (e) => {
  if (!flag) return
  // console.log(pos.l)
  let left = e.pageX - pos.l - pos.x
  if (left < 0) left = 0
  if (left > length) left = length
  $('.slider').style.left = left + "px"
  audio.volume = left / length
})
// 鼠标抬起事件!e.target.classList.contains('progressBar'))
document.addEventListener('mouseup', (e) => {
  // 不允许拖动
  flag = false
})
// 点击轨道
$('.progressBar').addEventListener('click', (e) => {
  if (!e.target.classList.contains('progressBar')) return
  // 鼠标位于轨道的位置
  const x = e.offsetX
  console.log(x)
  // 赋值left
  $('.slider').style.left = x + 'px'
  audio.volume = x / length
})

// 初始化函数
async function init() {
  try {
    // 初始化调用音乐接口
    const { data: { data: res } } = await axios.get('/bw/api/music')
    // console.log(res)
    data = res
    // 给按键标记
    $s('.key').forEach(v => {
      v.dataset.keyCode = data.find(j => j.keyTrigger === v.textContent).keyCode
      v.addEventListener('mousedown', () => v.classList.add('active'))
      v.addEventListener('mouseup', () => v.classList.remove('active'))
    })
    // audio.muted = !$('.power .button').classList.contains('active')
    audio.volume = 0
    // console.log($('.power .button').classList.contains('active'))
  } catch (err) {
    // console.log(err)
  }
}
// 设置url
function setUrl(keyCode) {
  const index = data.findIndex(v => v.keyCode == keyCode)
  // console.log(index)
  const url = data[index][$('.bank').dataset.str]
  // console.log(url)
  // console.log('at line 61 in src/main.js:', )
  // console.log(data)
  audio.src = url
  $('.info').textContent = data[index].id
}
